<template>
    <div>
        <input type="text" v-model="str">
        <button @click="fabu()">发布</button>

        <div v-show="condition">

            <h2>编辑</h2>
            <input type="text" v-model="tit">
            <input type="text" v-model="time">
            <button @click="saveHandler()">保存</button>
            <button @click="condition=false">取消</button>
        </div>


        <ul>
            <li v-for="(item, index) in arr" :key="index">
                <p>
                    {{ item.title }}  
                    <button @click="delHandler(index)">删除</button>
                    <button @click="editHandler(item,index)">编辑</button>
                </p>
                {{item.time}}

            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            str:'',
            arr:[],
            condition:false,

            tit:'',
            time:'',

            textSave:'',
        }
    },

    methods: {

        // 点击发布
        fabu(){
            let obj = {title:this.str,time:new Date().toString()}
            this.arr.push(obj)
            console.log(obj);

            this.str = ''
        },

        // 删除按钮
        delHandler(i){
            this.arr.splice(i,1)
        },

        // 编辑按钮
        editHandler(v,i){
            this.condition = 'ture'
            this.tit = v.title
            this.time = v.time
            this.textSave = v

        },

        // 保存按钮
        saveHandler(){
            this.textSave.title = this.tit
            this.textSave.time = new Date().toString()

            // this.condition = ''
        },
    },
}
</script>
<style lang="">
    
</style>